<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff;':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{bodyform.coinType}}-{{bodyform.tradeDuration}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="nameList ml-3 flex align-center A-Medium" :class="model=='light'?'nameListLight':''">
			<view @click="changePriceType(index)" class="mr-4 flex align-center justify-center"
				:class="index==priceType?'item1':'item'" v-for="(item,index) in nameList">
				{{item}}
			</view>
		</view>
		<view class="flex mx-3 mt-3 align-center justify-between">
			<view class="flex align-center">
				<view class="f0 mr-2">
					<image style="width: 72rpx;height: 72rpx;" src="/static/images/trade/18.png" mode=""></image>
				</view>
				<view class="A-Regular">
					<view class="flex align-center">
						<view class="title1 A-Medium" style="margin-right: 4rpx;"
							:class="model=='light'?'title1Light':''">
							{{i18n.o001}} BTC
						</view>
						<view class="text1" :class="model=='light'?'text1Light':''">
							{{objInfo.priceChangePercent}}%
						</view>
					</view>
					<view class="text1">
						${{objInfo.price}}
					</view>
				</view>
			</view>
			<view class="btn1 A-Medium flex align-center justify-center" :class="model=='light'?'btn1Light':''">
				K{{i18n.o002}}
				<view class="f0">
					<image style="width: 14rpx;height: 14rpx;" :src="'/static/images/downArrow_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="">
			<!-- @finished="initChart" -->
			<l-echart ref="chartContainer"></l-echart>
		</view>
		<view class="block mb-5 mx-3 mt-3 py-3 A-Medium" :class="model=='light'?'blockLight':''">
			<view class="flex align-center justify-center">
				<view class="flex flex-column align-center">
					<view class="f0">
						<image style="width: 104rpx;height: 104rpx;" src="/static/images/option/1.png" mode=""></image>
					</view>
					<view class="text1 mt-2">
						{{i18n.o004}}
					</view>
					<view class="text2">
						${{price}}
					</view>
					<view :style="time=='-- : -- : --'?'opacity: .7;':''" class="btn flex align-center justify-center"
						@click="handelBuy('Bullish')">
						{{i18n.o007}}
					</view>
					<view class="caoz flex align-center" style="padding: 6rpx 8rpx;">
						<view class="f0">
							<image style="width: 28rpx;height: 28rpx;" src="/static/images/option/3.png"
								@click="BullishNum('-')">
							</image>
						</view>
						<view class="num flex-1 text-alignC A-Regular">
							{{BullishPrice}}
						</view>
						<view class="f0">
							<image style="width: 28rpx;height: 28rpx;" src="/static/images/option/4.png"
								@click="BullishNum('+')">
							</image>
						</view>
					</view>
				</view>
				<view class="flex mx-2 align-center flex-column justify-between">
					<view class="text-alignC">
						<view class="text4">
							{{time}}
						</view>
						<view class="text5">
							{{i18n.o003}}
						</view>
					</view>
					<view class="text-alignC" style="margin-top: 120rpx;">
						<view class="text5">
							{{USDTMoney.a}}
						</view>
						<view class="text5" style="font-size: 20rpx;">
							{{i18n.o006}} USDT
						</view>
					</view>
				</view>
				<view class="flex flex-column align-center">
					<view class="f0">
						<image style="width: 104rpx;height: 104rpx;" src="/static/images/option/2.png" mode=""></image>
					</view>
					<view class="text1 mt-2">
						{{i18n.o005}}
					</view>
					<view class="text3">
						${{price}}
					</view>
					<view :style="time=='-- : -- : --'?'opacity: .7;':''" class="btn flex align-center justify-center"
						@click="handelBuy('Bearish')">
						{{i18n.o007}}
					</view>
					<view class="caoz flex align-center" style="padding: 6rpx 8rpx;">
						<view class="f0">
							<image style="width: 28rpx;height: 28rpx;" src="/static/images/option/3.png"
								@click="BearishNum('-')">
							</image>
						</view>
						<view class="num flex-1 text-alignC A-Regular">
							{{BearishPrice}}
						</view>
						<view class="f0">
							<image style="width: 28rpx;height: 28rpx;" src="/static/images/option/4.png"
								@click="BearishNum('+')">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderTab A-Medium ml-3 flex align-center justify-between"
			:class="model=='light'?'orderTabLight':''">
			<view class="flex align-center">
				<view :class="queryParams.optionsOrderStatus==item.value?'tabItem2  mr-3':'tabItem1 mr-3' "
					v-for="(item,index) in tabs" :key="index" @click="changeTab(item.value)">
					{{item.text}}
				</view>

			</view>
		</view>
		<view class="orderList A-Medium" style="margin-top: 14rpx;" :class="model=='light'?'orderListLight':''">
			<view v-for="(item,index) in listData" class="orderItem mx-3" style="margin-bottom: 12rpx;">
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{item.orderNo}}
					</view>
					<view class="">
						{{item.createTime}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="flex align-center">
						<view class="text2" style="margin-right: 12rpx;">
							{{item.coinType}}/USDT-{{item.tradeDuration}}M
						</view>
					</view>
				</view>
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n.o008}}
					</view>
					<view class="">
						${{item.buyPrice}}
					</view>
				</view>
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n.o009}}
					</view>
					<view class="">
						${{item.buyAmount}}
					</view>
				</view>
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						BTC{{i18n.o010}}
					</view>
					<view class="">
						${{item.currentPrice}}
					</view>
				</view>
				<view v-if="item.sellPrice" class="flex text1 align-center justify-between"
					style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n.o011}}
					</view>
					<view class="price1">
						$+{{item.profitLoss}}
					</view>
				</view>
				<template v-if="item.sellPrice">
					<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.o012}}
						</view>
						<view class="flex">
							<view class="">
								{{i18n2.l014}}
							</view>
						</view>
					</view>
				</template>

				<template v-else>

					<view v-if="!(item.pdjs1=='00:00:00'&&item.pdjs2=='00:00:00')"
						class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.o012}}
						</view>
						<view v-if="item.pdjs1=='00:00:00'" class="flex">
							<view class="">
								{{item.pdjs1}}
							</view>
						</view>
						<view v-else class="flex">
							<view class="">
								{{item.pdjs2}}
							</view>
							<view @click="closePosition(item)" class="label ml-1">
								{{i18n.o013}}
							</view>
						</view>
					</view>
					<view v-else class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
						<view class="">
							{{i18n.o014}}
						</view>
						<view class="flex">
							<view v-if="item.pdjs3!='00:00:00'" class="">
								{{item.pdjs3}}
							</view>
							<view v-else class="ml-1">
								{{i18n.o015}}
							</view>
						</view>
					</view>
				</template>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		optionsAdd,
		optionsList,
		optionsOrderStatus,
		coinglassOhlc_history,
		close_position
	} from '@/core/api/index.js';
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
	export default {
		data() {
			return {
				nameList: ['1m', '5m', '15m', '30m', '1h', '4h'],
				priceType: 0,
				listData: [],
				price: '',
				bodyform: {
					tradeDuration: '', //交易时限
					mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
					coinType: 'BTC', //币种
					buyPrice: '', //买入价
					buyAmount: '', //买入金额
					bullishBearish: '', // 看涨或看跌，看涨：Bullish, 看跌：Bearish
				},
				BullishPrice: 1000, //看涨价格
				BearishPrice: 1000, //看跌价格

				queryParams: {
					pageNo: 1,
					pageSize: 10,
					mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
					coinType: 'BTC', //币种
					tradeDuration: '',
					optionsOrderStatus: ''
				},
				tabs: [],
				objInfo: {},
				time: '',
				countdownInterval: null,
				timer: '',
			}
		},
		onLoad(options) {
			this.bodyform.tradeDuration = options.tradeDuration;
			this.bodyform.coinType = options.coinType;
			this.queryParams.tradeDuration = options.tradeDuration;
			this.queryParams.coinType = options.coinType;
			this.price = options.price;
			this.getTabs();
			this.get_coinglassOhlc_history();
			this.objInfo = JSON.parse(uni.getStorageSync('option2'));
			this.countdownToSpecificTime([this.objInfo.buyTimeStart, this.objInfo.buyTimeEnd], 1);
			this.bodyform.sellTimeStart = this.objInfo.sellTimeStart;
			this.bodyform.sellTimeEnd = this.objInfo.sellTimeEnd;
			this.bodyform.buyTimeStart = this.objInfo.buyTimeStart;
			this.bodyform.buyTimeEnd = this.objInfo.buyTimeEnd;
			this.bodyform.settlementTimeStart = this.objInfo.settlementTimeStart;
			this.bodyform.settlementTimeEnd = this.objInfo.settlementTimeEnd;
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('option2');
			},
			i18n2() {
				return this.$t('last');
			},
			i18n4() {
				return this.$t('last');
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney
			},
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus;
			},
			model() {
				return this.$store.state.config.model;
			},
			capitalPassword() {
				return this.$store.state.config.capitalPassword
			},
			mobileNumber() {
				return uni.getStorageSync('mobileNumber');
			},
			email() {
				return uni.getStorageSync('email');
			},
		},
		onReachBottom() {
			this.queryParams.pageNo++;
			this.getList();
		},
		methods: {
			// 获取k线数据
			get_coinglassOhlc_history() {
				coinglassOhlc_history({
					interval: this.nameList[this.priceType],
					symbol: this.bodyform.coinType + 'USDT'
				}).then(res => {
					console.log(res, 'cs---------------------cs');
					let list = [];
					for (let i = 0; i < res.result.dataList.length; i++) {
						if(i<7){
							res.result.dataList[i].t = this.timestampToDate(res.result.dataList[i].t);
							list.push([res.result.dataList[i].t, res.result.dataList[i].o, res.result.dataList[i].c,
								res.result.dataList[i].l, res.result.dataList[i].h
							]);
						}
					}
					// this.initChart(list);
				})
			},
			async initChart(list) {
				let chart = await this.$refs.chartContainer.init(echarts);
				// o c l h
				var rawData = list;
				function calculateMA(dayCount, data) {
					var result = [];
					for (var i = 0, len = data.length; i < len; i++) {
						if (i < dayCount) {
							result.push('-');
							continue;
						}
						var sum = 0;
						for (var j = 0; j < dayCount; j++) {
							sum += data[i - j][1];
						}
						result.push(sum / dayCount);
					}
					return result;
				}


				var dates = rawData.map(function(item) {
					return item[0];
				});

				var data = rawData.map(function(item) {
					return [+item[1], +item[2], +item[3], +item[4]];
				});
				var option = {
					backgroundColor: '#21202D',
					legend: {
						data: ['日K', 'MA5', 'MA10', 'MA15'],
						inactiveColor: '#777',
						textStyle: {
							color: '#fff'
						}
					},
					tooltip: {
						// show:true,
						trigger: 'axis',
						axisPointer: {
							animation: false,
							type: 'cross',
							lineStyle: {
								color: '#376df4',
								width: 2,
								opacity: 1
							}
						}
					},
					xAxis: {
						type: 'category',
						data: dates,
						axisLine: {
							lineStyle: {
								color: '#8392A5'
							}
						}
					},
					yAxis: {
						show:false,
						scale: true,
						axisLine: {
							lineStyle: {
								color: '#8392A5'
							}
						},
						splitLine: {
							show: false
						}
					},
					grid: {
						bottom: 80,
						right: 30
					},
					dataZoom: [{
						textStyle: {
							color: '#8392A5'
						},
						// handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
						handleSize: '80%',
						dataBackground: {
							areaStyle: {
								color: '#8392A5'
							},
							lineStyle: {
								opacity: 0.8,
								color: '#8392A5'
							}
						},
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}, {
						type: 'inside'
					}],
					animation: false,
					series: [{
							type: 'candlestick',
							name: '日K',
							data: data,
							itemStyle: {
								normal: {
									color: '#FD1050',
									color0: '#0CF49B',
									borderColor: '#FD1050',
									borderColor0: '#0CF49B'
								}
							}
						},
						{
							name: 'MA5',
							type: 'line',
							data: calculateMA(5, data),
							smooth: true,
							showSymbol: false,
							lineStyle: {
								normal: {
									width: 1
								}
							}
						},
						{
							name: 'MA10',
							type: 'line',
							data: calculateMA(10, data),
							smooth: true,
							showSymbol: false,
							lineStyle: {
								normal: {
									width: 1
								}
							}
						},
						{
							name: 'MA15',
							type: 'line',
							data: calculateMA(15, data),
							smooth: true,
							showSymbol: false,
							lineStyle: {
								normal: {
									width: 1
								}
							}
						}
						// ,
						// {
						// 	name: 'MA30',
						// 	type: 'line',
						// 	data: calculateMA(30, data),
						// 	smooth: true,
						// 	showSymbol: false,
						// 	lineStyle: {
						// 		normal: {
						// 			width: 1
						// 		}
						// 	}
						// }
					]
				};
				chart.setOption(option);
				// 使用 WebGL 渲染
				chart.use(echarts.feature.webGL);
			},
			// async initChart(list) {
			// 	let chart = await this.$refs.chartContainer.init(echarts);
			// 	// 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)

			// 	var data0 = splitData(list);
			// 	let xAxisColor;
			// 	let YAxisColor;
			// 	if (this.model == 'light') {
			// 		xAxisColor = '#666666';
			// 		YAxisColor = '#666666';
			// 	} else {
			// 		xAxisColor = '#f2f2f2';
			// 		YAxisColor = '#666666';
			// 	}
			// 	console.log(data0,'cs-------------');
			// 	function splitData(rawData) {
			// 		var categoryData = [];
			// 		var values = []
			// 		for (var i = 0; i < rawData.length; i++) {
			// 			categoryData.push(rawData[i].splice(0, 1)[0]);
			// 			values.push(rawData[i])
			// 		}
			// 		return {
			// 			categoryData: categoryData,
			// 			values: values
			// 		};
			// 	}

			// 	function calculateMA(dayCount) {
			// 		var result = [];
			// 		for (var i = 0, len = data0.values.length; i < len; i++) {
			// 			if (i < dayCount) {
			// 				result.push('-');
			// 				continue;
			// 			}
			// 			var sum = 0;
			// 			for (var j = 0; j < dayCount; j++) {
			// 				sum += data0.values[i - j][1];
			// 			}
			// 			result.push(sum / dayCount);
			// 		}
			// 		return result;
			// 	}
			// 	let option = {
			// 		grid: {
			// 			top: '10%', // 调整顶部间距
			// 			bottom: '10%', // 调整底部间距
			// 			left: '6%',
			// 			right: '6%',
			// 			containLabel: true
			// 		},
			// 		backgroundColor: 'transparent',
			// 		tooltip: {
			// 			trigger: 'axis',
			// 			axisPointer: {
			// 				type: 'line'
			// 			}
			// 		},
			// 		xAxis: {
			// 			type: 'category',
			// 			data: data0.categoryData,
			// 			scale: true,
			// 			boundaryGap: false,
			// 			axisLine: {
			// 				onZero: false,
			// 				lineStyle: {
			// 					color: xAxisColor
			// 				}
			// 			},
			// 			splitLine: {
			// 				show: false,
			// 			},
			// 			splitNumber: 20,
			// 			min: 'dataMin',
			// 			max: 'dataMax',

			// 		},
			// 		yAxis: {
			// 			axisLine: {
			// 				onZero: true,
			// 				lineStyle: {
			// 					color: YAxisColor
			// 				}
			// 			},
			// 			splitLine: {
			// 				show: false,
			// 			},
			// 			position: "right", //控制Y轴在那边显示
			// 			scale: true,
			// 			splitArea: {
			// 				show: false
			// 			}
			// 		},
			// 		dataZoom: [{
			// 				type: 'inside',
			// 				start: 50,
			// 				end: 100
			// 			},
			// 			{
			// 				show: false,
			// 				type: 'slider',
			// 				y: '90%',
			// 				start: 50,
			// 				end: 100
			// 			}
			// 		],
			// 		series: [{
			// 			name: '',
			// 			type: 'candlestick',
			// 			data: data0.values,
			// 			itemStyle: {
			// 				normal: {
			// 					color: "red",
			// 					color0: "green",
			// 					borderColor: null,
			// 					borderColor0: null
			// 				}
			// 			},
			// 		}, ]
			// 	};
			// 	chart.setOption(option)

			// },
			timestampToDate(timestamp) {
				// 创建一个新的Date对象，传入时间戳
				let date = new Date(timestamp * 1000);
				// 获取年、月、日
				let year = date.getFullYear();
				let month = date.getMonth() + 1; // getMonth() 返回的是0-11，所以加1得到实际月份
				let day = date.getDate();
				var hours = ("0" + date.getHours()).slice(-2);
				var minutes = ("0" + date.getMinutes()).slice(-2);
				var seconds = ("0" + date.getSeconds()).slice(-2);
				// 补零操作，确保单个数字前面有0
				month = ('0' + month).slice(-2);
				day = ('0' + day).slice(-2);

				// 返回格式化的日期字符串
				// return `${year}-${month}-${day}`;-${seconds}
				return `${month}-${day} ${hours}-${minutes}`;
			},
			changePriceType(e) {
				if (this.priceType == e) {
					return;
				}
				this.priceType = e;
				this.get_coinglassOhlc_history();
			},
			/** 订单列表*/
			getList() {
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				obj.tradeDuration = obj.tradeDuration.replace('m', '');
				obj.tradeDuration = Number(obj.tradeDuration);
				optionsList(obj).then(res => {
					let list = res.result.records;
					if (this.queryParams.pageNo == 1) {
						this.listData = list;
					} else {
						if (list.length == 0) {
							this.queryParams.pageNo--;
						} else {
							this.listData.push(...list);
						}
					}
					for (let i = 0; i < this.listData.length; i++) {
						this.listData[i].pdjs1 = this.getTimeRemainingUntil1845(this.listData[i].sellTimeStart
							.split(':'));
						this.listData[i].pdjs2 = this.getTimeRemainingUntil1845(this.listData[i].sellTimeEnd.split(
							':'));
						this.listData[i].pdjs3 = this.getTimeRemainingUntil1845(this.listData[i].settlementTimeEnd
							.split(':'));
					}
					this.$forceUpdate();
					this.changeList()
				})
			},
			changeList() {
				clearInterval(this.timer);
				this.timer = null;
				this.timer = setInterval(res => {
					for (let i = 0; i < this.listData.length; i++) {
						this.listData[i].pdjs1 = this.getTimeRemainingUntil1845(this.listData[i].sellTimeStart
							.split(':'));
						this.listData[i].pdjs2 = this.getTimeRemainingUntil1845(this.listData[i].sellTimeEnd.split(
							':'));
						this.listData[i].pdjs3 = this.getTimeRemainingUntil1845(this.listData[i].settlementTimeEnd
							.split(':'));
					}
					this.$forceUpdate();
				}, 1000)
			},
			getTimeRemainingUntil1845(arr, type) {
				const now = new Date();
				const targetTime = new Date(now);
				targetTime.setHours(arr[0], arr[1], arr[2], 0); // 设置目标时间
				if (targetTime <= now) {
					// 如果目标时间已经过去，设置为明天的同一时间
					// targetTime.setDate(targetTime.getDate() + 1);
					return '00:00:00';
				}
				const difference = targetTime.getTime() - now.getTime();
				let seconds = Math.floor(difference / 1000) % 60;
				let minutes = Math.floor(difference / 1000 / 60) % 60;
				let hours = Math.floor(difference / 1000 / 60 / 60) % 24;
				hours = String(hours).padStart(2, '0');
				minutes = String(minutes).padStart(2, '0');
				seconds = String(seconds).padStart(2, '0');
				return hours + ':' + minutes + ':' + seconds;
			},
			/** 获取tab*/
			getTabs() {
				optionsOrderStatus().then(res => {
					this.tabs = res.result;
					this.queryParams.optionsOrderStatus = this.tabs[0].value; //optionsOrderStatus
					this.queryParams.pageNo = 1;
					this.getList()
				})
			},
			/** 看涨调整*/
			BullishNum(type) {
				if (type == '-') {
					if (this.BullishPrice <= 1000) {
						return;
					}
					this.BullishPrice -= 1000
				} else if (type == '+') {
					this.BullishPrice += 1000
				}
			},
			/** 看跌调整*/
			BearishNum(type) {
				if (type == '-') {
					if (this.BearishPrice <= 1000) {
						return;
					}
					this.BearishPrice -= 1000
				} else if (type == '+') {
					this.BearishPrice += 1000
				}
			},
			/** 点击购买 */
			handelBuy(type) {
				if (this.passportAuthStatus != 3) {
					// 未提交
					this.$tool.showToast(this.i18n4.l015);
					return;
				}
				if (this.time == '-- : -- : --') {
					return;
				}
				if (!capitalPassword) {
					let obj = {
						type: 2,
						verifyType: '',
						account: '',
					}
					// true- 有手机号
					if (this.mobileNumber) {
						obj.verifyType = 1;
						obj.account = this.mobileNumber;
					} else {
						obj.verifyType = 2;
						obj.account = this.this.mobileNumber;
					}
					this.$tool.navTo(this.$tool.handleUrl('/pages/mine/testVerify', obj));
					return;
				}
				this.bodyform.bullishBearish = type
				this.$tool.navTo('/pages/mine/moneyPass')
			},
			pass() {
				let that = this
				let obj = JSON.parse(JSON.stringify(this.bodyform));
				obj.tradeDuration = obj.tradeDuration.replace('m', '');
				if (obj.bullishBearish == 'Bullish') {
					obj.buyAmount = that.BullishPrice
				} else if (obj.bullishBearish == 'Bearish') {
					obj.buyAmount = that.BearishPrice
				}
				obj.buyPrice = this.price;
				optionsAdd(obj).then(res => {
					that.$tool.showToast(that.i18n.o018);
					this.queryParams.pageNo = 1;
					that.getList()
				})
			},
			/** 切换tab */
			changeTab(value) {
				if (this.queryParams.optionsOrderStatus == value) {
					return
				}
				this.queryParams.optionsOrderStatus = value;
				this.queryParams.pageNo = 1;
				this.getList()
			},
			countdownToSpecificTime(e, type) {
				// e 时间 e[0] 开始时间 e[1] 结束时间
				// num 1 2 3BTC的的三个时间 4 5 6ETH的三个时间
				// type 1 启示时间 2 截止时间 
				console.log(e, 'cs', this.objInfo, 'cs');
				let hour;
				let minute;
				let second;
				if (type == 1) {
					hour = e[0].split(':')[0];
					minute = e[0].split(':')[1];
					second = e[0].split(':')[2];
				} else if (type == 2) {
					hour = e[1].split(':')[0];
					minute = e[1].split(':')[1];
					second = e[1].split(':')[2];
				}
				// console.log(hour,minute,second);
				const targetTime = new Date();
				targetTime.setHours(hour);
				targetTime.setMinutes(minute);
				targetTime.setSeconds(second);
				targetTime.setMilliseconds(0);

				if (targetTime < new Date()) {
					if (type == 1) {
						// 超过启示时间 开始显示计时
						// console.log('超过启示时间',num)
						this.countdownToSpecificTime(e, 2);
						return;
					} else if (type == 2) {
						// 超过截止时间 开始显示计时
						// console.log('超过截止时间',num)
						this['time'] = '-- : -- : --';
					}
					// targetTime.setDate(targetTime.getDate() + 1);
				}

				this['countdownInterval'] = setInterval(res => {
					const now = new Date();
					const timeDifference = targetTime - now;
					if (timeDifference <= 0) {
						clearInterval(this['countdownInterval']);
						this['countdownInterval'] = null;
						// console.log("倒计时结束",num);

						if (type == 2) {
							this['time'] = '-- : -- : --';
						}
						return;
					}
					let hours = Math.floor(timeDifference / (1000 * 60 * 60));
					let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
					let seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
					hours = String(hours).padStart(2, '0');
					minutes = String(minutes).padStart(2, '0');
					seconds = String(seconds).padStart(2, '0');
					if (type == 2) {
						this['time'] = hours + ':' + minutes + ':' + seconds;
					} else {
						this['time'] = '-- : -- : --';
					}
				}, 1000);
			},
			closePosition(item) {
				close_position({
					id: item.id,
					mobileUserId: uni.getStorageSync('mobileUserId'),
					orderNo: item.orderNo
				}).then(res => {
					this.queryParams.pageNo = 1;
					this.getList();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.orderTab {
		overflow-x: scroll;

		view {
			flex-shrink: 0;
		}

		.tabItem1 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.tabItem2 {
			font-size: 24rpx;
			color: #F7F7F7;
		}
	}

	.orderTabLight {
		.tabItem1 {
			color: #7F838D;
		}

		.tabItem2 {
			color: #0E0F11;
		}
	}

	.orderList {
		.orderItem {
			padding: 24rpx 30rpx;
			background: #16181C;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #1F2128;

			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}

			.text2 {
				font-size: 28rpx;
				color: #F7F7F7;
			}

			.text3 {
				font-size: 24rpx;
				color: #F7F7F7;
			}

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #F7F7F7;
				margin-right: 8rpx;
			}

			.icon2 {
				width: 20rpx;
				height: 20rpx;
				background: #7F838D;
				margin-right: 8rpx;
			}

			.label {
				color: #82DA4C;
				font-size: 24rpx;
			}

			.price1 {
				font-size: 24rpx;
				color: #E7343F;
			}

			.price2 {
				font-size: 24rpx;
				color: #53D290;
			}

			.price3 {
				font-size: 24rpx;
				color: #82DA4C;
			}
		}
	}

	.orderListLight {
		.orderItem {
			background: #FFFFFF;
			border: 2rpx solid #fff;

			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}

			.text2 {
				color: #0E0F11;
			}

			.text3 {
				color: #0E0F11;
			}

			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #0E0F11;
				margin-right: 8rpx;
			}

			.label {
				font-size: 24rpx;
				color: #82DA4C;
			}
		}
	}

	.block {
		background: #16181C;
		border-radius: 36rpx;

		.text1 {
			font-size: 28rpx;
			color: #F7F7F7;
		}

		.text2 {
			font-size: 28rpx;
			color: #D22540;
		}

		.text3 {
			font-size: 28rpx;
			color: #53D290;
		}

		.text4 {
			font-size: 28rpx;
			color: #82DA4C;
		}

		.text5 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.btn {
			width: 120rpx;
			height: 50rpx;
			background: #5951BA;
			border-radius: 122rpx;
			font-size: 24rpx;
			color: #F7F7F7;
			margin-top: 12rpx;
			margin-bottom: 16rpx;
		}

		.caoz {
			height: 40rpx;
			background: #1F2128;
			border-radius: 114rpx 114rpx 114rpx 114rpx;
			border: 2rpx solid #44474F;
			min-width: 166rpx;

			.num {
				font-size: 28rpx;
				color: #F7F7F7;
			}
		}
	}

	.blockLight {
		background: #fff;
		border-radius: 36rpx;

		.text1 {
			font-size: 28rpx;
			color: #0E0F11;
		}

		.text2 {
			font-size: 28rpx;
			color: #D22540;
		}

		.text3 {
			font-size: 28rpx;
			color: #53D290;
		}

		.text4 {
			font-size: 28rpx;
			color: #82DA4C;
		}

		.text5 {
			font-size: 24rpx;
			background: #E6E8EF;
		}

		.btn {
			width: 120rpx;
			height: 50rpx;
			background: #5951BA;
			border-radius: 122rpx;
			font-size: 24rpx;
			color: #F7F7F7;
			margin-top: 12rpx;
			margin-bottom: 16rpx;
		}

		.caoz {
			height: 40rpx;
			background: #F4F4F4;
			border-radius: 114rpx 114rpx 114rpx 114rpx;
			border: none;
			min-width: 166rpx;

			.num {
				font-size: 28rpx;
				color: #0E0F11;
			}
		}
	}

	.btn1 {
		width: 124rpx;
		height: 72rpx;
		border-radius: 106rpx 106rpx 106rpx 106rpx;
		border: 2rpx solid #1F2128;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.btn1Light {
		width: 124rpx;
		height: 72rpx;
		border-radius: 106rpx 106rpx 106rpx 106rpx;
		border: 2rpx solid #B5B7BF;
		font-size: 28rpx;
		color: #0E0F11;
	}

	.title1 {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.title1Light {
		font-size: 28rpx;
		color: #0E0F11;
	}

	.text1 {
		font-size: 24rpx;
		color: #D22540;
	}


	.nameList {
		overflow-x: scroll;
		margin-top: 34rpx;

		.item {
			flex-shrink: 0;
			// width: 144rpx;
			// height: 60rpx;
			padding: 8rpx 20rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			// width: 144rpx;
			// height: 60rpx;
			flex-shrink: 0;
			padding: 8rpx 20rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}
</style>